<template>
    <el-dialog class='dialog-box' title="发放积分" :visible.sync="integralData.dialogState" size="tiny"  @close="close('dataForm')" >
        <el-form v-loading='loading' class="form-content"  :model="dataForm" :rules="rules" ref="dataForm" label-width="80px"  label-position='left'>
            <el-row>
                <el-col :span="24">
                    <el-form-item class='remake' label="发放数额" prop="integral" :rules="rules.integral">
                        <el-popover
                        placement="top-start"
                        trigger="focus" 
                        content="请输入最多七位的正整数。">
                            <el-input v-model="dataForm.integral" slot="reference" :maxlength="7" placeholder="请输入发放数额"></el-input>
                        </el-popover>
                    </el-form-item>
                    <div class='money-total'>价值金额：{{dataForm.integral==''?'0':isNaN(Number(dataForm.integral))?'0':Number(dataForm.integral/100)}}元</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item class='remake' label="备注" prop="remake" :rules="rules.remake">
                        <el-popover
                        placement="top-start"
                        trigger="focus" 
                        content="长度在30个字符以内。">
                            <el-input type="textarea" :rows="4" slot="reference" :maxlength="30" placeholder="请输入备注" v-model="dataForm.remake"></el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item>
                        <span class='limit'><font color="red">* </font> 一次发放最多是7位数（单位：积分）</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('dataForm')"> 取 消 </el-button>
            <el-button type="primary" @click="submitForm('dataForm')"> 确 定 </el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { issuePoint } from 'api/integralManage';
    export default {
        name: 'sendIntegral',
        props: {
            integralData: {
                default() {
                    return {
                        dialogState: 'false'
                    }
                },
                required: true
            }
        },
        data() {
            return {
                loading: false,
                dataForm: {
                    integral: '',
                    remake: ''
                },
                rules: {
                    integral: [
                        { required: true, message: '请输入发放数额'},
                        { pattern: /^[1-9]\d{0,6}$/, message: '请输入最多七位的正整数'}
                        // { type: 'number', min: 1, max: 9999999, message: '一次发放不超过七位数积分且不低于0', trigger: 'blur' }
                    ],
                    remake: [
                        { required: true, message: '请输入备注'},
                        { min: 1, max: 30, message: '长度在30个字符以内', trigger: 'blur' }
                    ]
                }
            }
        },
        computed: {
           
        },
        methods: {
            submitForm(dataForm) {
                this.$refs[dataForm].validate((valid) => {
                    if (valid) {

                        let pointInput = this.dataForm.integral; // 发放积分
                        let auditDesc = this.dataForm.remake; // 备注”  
                        this.loading = true;
                        issuePoint(pointInput, auditDesc).then(response => {
                            
                            this.loading = false;
                            if (response.data.status == 200) {
                                this.$message.success(response.data.errorMsg);
                                this.integralData.dialogState = false;
                                this.$emit('search');
                                this.$emit('upScore');
                                this.dataForm.integral = '';
                                this.dataForm.remake = '';
                                this.$store.dispatch('UpdateCache', true);
                            } else {
                                this.$message.error(response.data.errorMsg);
                            }
                        }).catch(() => {
                            this.loading = false;
                        })
                    }
                })
            },
            resetForm(dataForm) {
                this.integralData.dialogState = false;
                this.$refs[dataForm].resetFields();
            },
            close(dataForm) {
                this.integralData.dialogState = false;
                this.$refs[dataForm].resetFields();
            }
        }
    }

</script>

<style lang="scss" scoped>
    .dialog-box{
        .form-content{
            width: 90%;
            margin: 0 auto; 
            .remake {
                margin-bottom:0;
            }
            .money-total {
                float: right;
                margin-bottom: 22px;
                margin-top: 5px;
                font-size: 12px;
                padding-left: 70px;
            }
            .limit {
                font-size: 12px;
                display: inline-block;
                margin-top: 10px;
            }
        }
        .dialog-footer{
            width: 90%;
            margin: 0 auto; 
            text-align:center;
        }
    }
</style>